<template>
  <div class="visualization">
    <n-card title="日志可视化">
      <n-space vertical>
        <!-- 视图选择 -->
        <n-card title="视图选择">
          <n-space>
            <n-button 
              v-for="view in viewOptions" 
              :key="view.key"
              :type="currentView === view.key ? 'primary' : 'default'"
              @click="currentView = view.key"
            >
              {{ view.label }}
            </n-button>
          </n-space>
        </n-card>

        <!-- 图表区域 -->
        <n-card title="图表展示">
          <div class="chart-container">
            <v-chart v-if="currentView === 'timeline'" :option="timelineOption" />
            <v-chart v-if="currentView === 'distribution'" :option="distributionOption" />
            <v-chart v-if="currentView === 'trend'" :option="trendOption" />
          </div>
        </n-card>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 响应式数据
const currentView = ref('timeline')

// 视图选项
const viewOptions = [
  { label: '时间线视图', key: 'timeline' },
  { label: '分布视图', key: 'distribution' },
  { label: '趋势视图', key: 'trend' }
]

// 图表配置
const timelineOption = computed(() => ({
  title: {
    text: '日志时间线'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'time',
    data: ['10:00', '10:01', '10:02', '10:03', '10:04']
  },
  yAxis: {
    type: 'category',
    data: ['ERROR', 'WARN', 'INFO', 'DEBUG']
  },
  series: [{
    name: '日志数量',
    type: 'scatter',
    data: [
      [0, 0, 5], [1, 1, 3], [2, 0, 8], [3, 2, 2], [4, 1, 4]
    ]
  }]
}))

const distributionOption = computed(() => ({
  title: {
    text: '日志级别分布'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    name: '日志级别',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 335, name: 'INFO' },
      { value: 310, name: 'WARN' },
      { value: 234, name: 'ERROR' },
      { value: 135, name: 'DEBUG' }
    ]
  }]
}))

const trendOption = computed(() => ({
  title: {
    text: '错误趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['10:00', '10:01', '10:02', '10:03', '10:04']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '错误数量',
    type: 'line',
    data: [5, 3, 8, 2, 4]
  }]
}))
</script>

<style scoped>
.visualization {
  max-width: 1200px;
  margin: 0 auto;
}

.chart-container {
  height: 500px;
  width: 100%;
}
</style> 